Next.js & TypeScript環境にStorybookを追加

参考

$ npm i -D @storybook/react

stroybookを追加

addonは必要になるまで入れない

storybookの設定を追加

code:.storybook/main.js

module.exports = {

addons: [],

};

package.jsonに追記

code:package.json

"scripts": {

"storybook": "start-storybook -p 6006",

"build:storybook": "build-storybook -o build/storybook"

},

終わり

code:hoge.tsx

export const Hoge = () => {

return <div>aaa</div>;

};

code:hoge.stories.tsx

import React from 'react';

import { Hoge } from '.';

export default {

title: 'Hoge'

};

export const showHoge = () => <Hoge />;

めちゃくちゃダルい

pathのかいけつ

これでいける

useRouterを使っているとerrorになる